<template>
  <div>
    <el-button type="primary" @click="willAdd">添加</el-button>
    <!-- 2.7 父组件绑定子组件的willUpdate -->
    <v-list @willUpdate="willUpdate" :list='list' @init="init"></v-list>
    <!-- 2.2 将status 传给自子组件 -->
    <!-- form应该有最新的数据，将list传给form -->
    <!-- 3.6 通过ref获取子组件 -->
    <v-form :status="status" @init="init" :list="list" ref="form"></v-form>
  </div>
</template>

<script>
// 2.弹框的消失和出现
// 3 发请求
import vList from "./componens/list.vue";
import vForm from "./componens/form.vue";

import { reqrolelist } from "../../http/api";
export default {
  components: {
    vList,
    vForm
  },
  data() {
    return {
      // 2.1 初始化statu
      status: {
        isshow: false, //控制弹框的消失为false,弹框的出现为true,默认为false
        isAdd: true //判断是添加点击为true(添加角色)，编辑点击为false(修改角色)
      },
      // 3.1 初始化数据 由于都会用到数组，所以放到父组件中
      list: []
    };
  },
  methods: {
    // 2.5 点击了添加
    willAdd() {
      this.status = {
        isshow: true,
        isAdd: true
      };
    },
    // 2.8 点击编辑
    willUpdate(id) {
      this.status = {
        isshow: true,
        isAdd: false
      };
      //3.6 用ref修改子组件的方法
      this.$refs.form.getOne(id)  
    },
    // 请求函数
    init() {
      reqrolelist().then(res => {
      // console.log(res);
        if (res.data.msg) {
          this.list = res.data.list?res.data.list:[];
        }
      });
    }
  },
  // 一进页面就获取
  mounted() {
    // // 3.2 发起列表请求
    this.init();
  }
};
</script>

<style lang="less" scoped>
@import "../../less/index.less";
</style>